.container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background-color: var(--interactive);
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}

.container:hover {
  cursor: pointer;
}

.container:hover > a > .image {
  filter: contrast(100%);
}

.container a {
  text-decoration: none;
  color: #fff;
}

.image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 140%;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}

.image::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

.content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem 1rem 0 1rem;
}

.title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.content p {
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 600;
}
